<template>
  <view class='tag-cont-box'>
    <view
        class='tag-cont-line'
        v-if='isShowTag'
        :style="{height: titleFont, background: tagColor}"
    ></view>
    <text
        class='tag-cont-txt'
        :class="rightIsContent ? 'tag-have-content' : ''"
        :style="{color: titleColor, fontSize: titleFont}"
    >{{title}}</text>
  </view>
</template>

<script>

/** 前面带标识的标题栏组件 */
export default {
  name: "TagTitle",
  props: {
    /** 是否显示前面的标识 */
    isShowTag: {
      type: Boolean,
      default: true
    },
    /** 标题内容 */
    title: {
      type: String,
      default: ''
    },
    /** 前面标识的颜色 */
    tagColor: {
      type: String,
      default: '#E42417'
    },
    /** 标题栏右侧是否有其他内容 */
    rightIsContent: {
      type: Boolean,
      default: false
    },
    /** 标题文字颜色 */
    titleColor: {
      type: String,
      default: '#333333'
    },
    /** 标题文字大小 */
    titleFont: {
      type: String,
      default: '38rpx'
    }
  },
  mounted() {
    // console.log(this.rightIsContent)
  }
}
</script>

<style scoped lang="scss">
$tagTitleHeight: 48rpx;

.tag-cont-box {
  display: inline-flex;
  align-items: center;
  margin: 15rpx 25rpx;
  height: $tagTitleHeight;
  .tag-cont-line {
    width: 7rpx;
  }
  .tag-cont-txt {
    margin-left: 15rpx;
    height: 100%;
    max-width: calc(100vw - 120rpx);
    font-weight: 800;
    line-height: $tagTitleHeight;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
  }
  .tag-have-content {
    max-width: calc(100vw - 260rpx);
  }
}
</style>
